<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      http-equiv="X-UA-Compatible"
      content="IE=edge"
    />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>Document</title>
  </head>
  <body>
    <span id="txt"></span>
    <br />
    <input
      type="text"
      id="input"
    />
    <script>
      var obj = {}

      // 参数1 代理的对象
      // 参数2 设置 get set 
      const proxyObj = new Proxy(obj, {
        get() {
          return this
        },
        // target 对象
        // key 键
        // value 值
        set(target, key, value) {
          document.querySelector('#txt').innerHTML = value
          document.querySelector('#input').value = value
        }
      })

      proxyObj.message = 'hello vue'

      document.querySelector('#input').addEventListener('input', (e) => {
        document.querySelector('#txt').innerHTML = e.target.value
      })
      // 参数1 劫持的对象
      // 参数2 劫持对象的属性
      // 参数3 设置 get set  
      // Object.defineProperty(obj, 'message', {
      //   get() {
      //     return obj
      //   },
      //   set(val) {
      //     // console.log(val)
      //     document.querySelector('#txt').innerHTML = val
      //     document.querySelector('#input').value = val
      //   }
      // })

      // // 给对象赋值
      // obj.message = 'hello vue'

      // document.querySelector('#input').addEventListener('input', (e) => {
      //   // console.log(e.target.value)
      //   document.querySelector('#txt').innerHTML = e.target.value
      // })
    </script>
  </body>
</html>
